<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <select data-bind="options: tilesets, optionsText: 'name', value: selectedTileset, optionsCaption: 'Choose a Tileset...'"></select>
    <div><input type="checkbox" data-bind="checked: shadows"> Shadows</div>
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer',{
        shadows : true
    });
//    viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
    initCesium.show3DInspector()
    var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

    viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);

    var scene = viewer.scene;
    var tileset;

    var viewModel = {
        tilesets: [
            {
                name: 'Tileset',
                resource: '../data/Cesium3DTiles/Tilesets/Tileset/tileset.json'
            }, {
                name: 'Translucent',
                resource: '../data/Cesium3DTiles/Batched/BatchedTranslucent/tileset.json'
            }, {
                name: 'Translucent/Opaque',
                resource: '../data/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/tileset.json'
            }, {
                name: 'Multi-color',
                resource: '../data/Cesium3DTiles/Batched/BatchedColors/tileset.json'
            }, {
                name: 'Request Volume',
                resource: '../data/Cesium3DTiles/Tilesets/TilesetWithViewerRequestVolume/tileset.json'
            }, {
                name: 'Batched',
                resource: '../data/Cesium3DTiles/Batched/BatchedWithBatchTable/tileset.json'
            }, {
                name: 'Instanced',
                resource: '../data/Cesium3DTiles/Instanced/InstancedWithBatchTable/tileset.json'
            }, {
                name: 'Instanced/Orientation',
                resource: '../data/Cesium3DTiles/Instanced/InstancedOrientation/tileset.json'
            }, {
                name: 'Composite',
                resource: '../data/Cesium3DTiles/Composite/Composite/tileset.json'
            }, {
                name: 'PointCloud',
                resource: '../data/Cesium3DTiles/PointCloud/PointCloudRGB/tileset.json'
            }, {
                name: 'PointCloudConstantColor',
                resource: '../data/Cesium3DTiles/PointCloud/PointCloudConstantColor/tileset.json'
            }, {
                name: 'PointCloudNormals',
                resource: '../data/Cesium3DTiles/PointCloud/PointCloudNormals/tileset.json'
            }, {
                name: 'PointCloudBatched',
                resource: '../data/Cesium3DTiles/PointCloud/PointCloudBatched/tileset.json'
            }, {
                name: 'PointCloudDraco',
                resource: '../data/Cesium3DTiles/PointCloud/PointCloudDraco/tileset.json'
            }
        ],
        selectedTileset: undefined,
        shadows: true
    };

    Cesium.knockout.track(viewModel);

    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    Cesium.knockout.getObservable(viewModel, 'shadows').subscribe(function(enabled) {
        viewer.shadows = enabled;
    });

    Cesium.knockout.getObservable(viewModel, 'selectedTileset').subscribe(function(options) {
        if (Cesium.defined(tileset)) {
            scene.primitives.remove(tileset);
        }
        if (!Cesium.defined(options)) {
            inspectorViewModel.tileset = undefined;
            return;
        }

        tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url : options.resource
        }));

        tileset.readyPromise.then(function() {
            inspectorViewModel.tileset = tileset;
            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -2.0, Math.max(100.0 - tileset.boundingSphere.radius, 0.0)));

            var properties = tileset.properties;
            if (Cesium.defined(properties) && Cesium.defined(properties.Height)) {
                tileset.style = new Cesium.Cesium3DTileStyle({
                    color: {
                        conditions: [
                            ['${Height} >= 83', "color('purple', 0.5)"],
                            ['${Height} >= 80', "color('red')"],
                            ['${Height} >= 70', "color('orange')"],
                            ['${Height} >= 12', "color('yellow')"],
                            ['${Height} >= 7', "color('lime')"],
                            ['${Height} >= 1', "color('cyan')"],
                            ['true', "color('blue')"]
                        ]
                    }
                });
            }
        }).otherwise(function(error) {
            throw(error);
        });
    });

    viewModel.selectedTileset = viewModel.tilesets[0];

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

    handler.setInputAction(function(movement) {
        var feature = inspectorViewModel.feature;
        if (Cesium.defined(feature)) {
            var propertyNames = feature.getPropertyNames();
            var length = propertyNames.length;
            for (var i = 0; i < length; ++i) {
                var propertyName = propertyNames[i];
                console.log(propertyName + ': ' + feature.getProperty(propertyName));
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction(function(movement) {
        var feature = inspectorViewModel.feature;
        if (Cesium.defined(feature)) {
            feature.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

</script>
</body>

</html>